<template>
  <div class="box">
    <div class="box1">
      <van-icon @click="$router.replace(`/fc`)" name="shopping-cart-o" />
      <van-icon @click="$router.replace(`/dc`)" name="setting-o" />
    </div>
    <div class="amor">
      <img src="../../../img/th (4).jpg" alt="" />
      <h1>Amor</h1>
      <h3>欢迎来到美住~</h3>
    </div>
    <div class="father">
      <span class="demo-home-nav__block"   @click="$router.replace(`/sc`)">
        我的收藏
        <svg viewBox="0 0 1024 1024" class="demo-home-nav__icon"><path fill="#B6C3D2" d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"></path><path fill="#B6C3D2" d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"></path></svg>
        </span>
      <span  class="demo-home-nav__block" @click="$router.replace(`/ac`)">
        我的订单
        <svg viewBox="0 0 1024 1024" class="demo-home-nav__icon"><path fill="#B6C3D2" d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"></path><path fill="#B6C3D2" d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"></path></svg>
        </span>
      <span  class="demo-home-nav__block" @click="$router.replace(`/bc`)">
        推送历史
        <svg viewBox="0 0 1024 1024" class="demo-home-nav__icon"><path fill="#B6C3D2" d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"></path><path fill="#B6C3D2" d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"></path></svg>
        </span>
      <span  class="demo-home-nav__block" @click="$router.replace({path: `/cc`, query: {origin:'/home/me/index'}})">
        常见问题1
        <svg viewBox="0 0 1024 1024" class="demo-home-nav__icon"><path fill="#B6C3D2" d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"></path><path fill="#B6C3D2" d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"></path></svg>
        </span>
    </div>
  </div>
</template>

<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<script>
export default {};
</script>

<style lang="scss" scoped>
@import url("https://unpkg.com/vant@2.12/lib/index.css ");

.box .box1 {
  display: flex;
  justify-content: end;
  padding: 30px 0px 30px 0;
  letter-spacing: 1em;
  font-size: 27px;
}
.amor {
  margin-left: 50px;
}
.amor img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
h1 {
  font-size: 16px;
  color: #333333;
}
h3 {
  font-size: 10px;
  color: #6b6b6b;
}
.father {
  width: 80vw;
  margin: 0 auto;
  margin-top:20px;
}
.demo-home-nav__block {
    position: relative;
    display: -webkit-flex;
    display: flex;
    margin: 0 0 12px;
    padding-left: 20px;
    color: #323233;
    font-weight: 600;
    font-size: 14px;
    line-height: 50px;
    background: #f7f8fa;
    border-radius: 9px;
}
    .demo-home-nav__icon {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

</style>
